<template>
    <el-dialog v-model="dialogVisible" title="修改联系人" :close-on-click-modal="false" width="350px">
        <div>
            <el-form ref="formRef" :model="formData" :rules="rules" label-width="100px" class="">
                <el-form-item v-for="(i, index) in formData" :key="index" :label="i.label" :prop="`${i.prop}.value`">
                    <el-input v-if="i.type === 'input'" v-model="i.value" :type="i.inputType || 'text'"
                        :placeholder="i.placeholder" />
                    <el-radio-group v-if="i.type === 'radio'" v-model="i.value" class="ml-4">
                        <template v-for="(item, idx) in i.options" :key="idx" >
                            <el-radio :label="item.value">{{ item.label }}</el-radio>
                        </template>
                    </el-radio-group>
                </el-form-item>
            </el-form>
        </div>
        <template #footer>
            <div class="flex flex-jc-c">
                <div class="flex">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="submit">
                        确定
                    </el-button>
                </div>
            </div>
        </template>
    </el-dialog>
</template>
<script setup>
import { ref, watch } from 'vue'

const props = defineProps({
    show: {
        type: Boolean,
        default: false
    }
})

const emits = defineEmits(['update:show', 'success'])

const dialogVisible = ref(false)

watch(() => props.show, (newval) => {
    dialogVisible.value = newval
})

watch(dialogVisible, (newval) => {
    emits('update:show', newval)
    if (!newval) {
        formRef.value.resetFields()
    }
})


const formData = ref({
    name: {
        label: '联系人姓名',
        prop: 'name',
        type: 'input',
        placeholder: '请输入联系人姓名',
        inputType: 'text',
        value: ''
    },
    phone: {
        label: '手机号',
        prop: 'phone',
        type: 'input',
        placeholder: '请输入手机号',
        inputType: 'text',
        value: ''
    },
    gender: {
        label: '性别',
        prop: 'gender',
        type: 'radio',
        options: [
            {
                label: '男',
                value: 1
            },
            {
                label: '女',
                value: 0
            },
        ],
        placeholder: '请输入手机号',
        inputType: 'text',
        value: ''
    },
    remark: {
        label: '备注',
        prop: 'remark',
        type: 'input',
        placeholder: '请输入备注',
        inputType: 'text',
        value: ''
    },
})

const rules = ref({
    'name.value': [
        {
            required: true,
            trigger: 'blur',
            message: '联系人姓名不能为空'
        }
    ],
    'phone.value': [
        {
            required: true,
            trigger: 'blur',
            message: '手机号不能为空'
        }
    ],
    'gender.value': [
        {
            required: true,
            trigger: 'change',
            message: '性别不能为空'
        }
    ],
})

const formRef = ref(null)

const submit = () => {
    formRef.value.validate((valid) => {
        if (valid) {
            // handleAddChannel()
        } else {
            console.log('error submit!')
            return false
        }
    })
}

const handleAddChannel = () => {
    const data = {
        name: formData.value.channelName.value,
        auditStatus: 1, //固定值
        type: 1, //固定值
    }
    addChannel(data).then(res => {
        ElMessage({
            message: '新增成功',
            type: 'success',
        })
        emits('success')
        dialogVisible.value = false
    })
}

</script>
<style lang="scss" scoped>
.bg-gray {
    background: #fafafc;
}

.table-item {
    height: 40px;
    line-height: 40px;
    border-top: 1px solid $borderColor;
    cursor: move;
}

.table-head {
    height: 40px;
    line-height: 40px;
}
</style>